<!-- 积分签到 -->
<template>
	<view class="score_task pr">
		<view class="score_task_content pa">
			<!-- 头部背景 -->
			<view class="taskFix pr">
			<view class="head_bg pr">
				<image :src="task_bg"></image>
			</view>
			<!-- 签到 -->
			<view class="sign_in pr">
				<view class="sign_in_box">
					<view class="text">
						已连续签到
						<span>{{ count }}</span>次
					</view>
					<view class="sign_in_content x-bc">
						<view class="part tc pr" v-for="(item,index) in signList" :key="index" 
                        :class="item.sign ? 'sign_in_color' : ''"
                        >
							<view class="date pa">{{ item.name }} </view>
							<image :src="star"></image>
							<view class="circle tc pa">{{ item.points || 0}}积分</view>
						</view>
					</view>
					<view class="button tc" @click.stop="change">
						<span v-if="!today">签到</span>
						<span v-else="today">已签到</span>
					</view>
				</view>
			</view>
			<!-- 当前积分 -->
			<view class="integral pr">
				<view class="integral_bg pr">
					<image :src="card" mode=""></image>
				</view>
				<view class="integral_box pa x-bc">
					<view class="text">
						<p>{{ actPoints }}</p>
						<span>当前积分</span>
					</view>
					<view class="button x-f" @click.stop="toTabbar(integral_url)">
						<span>去兑换</span>
					</view>
				</view>
			</view>
			</view>
			<!-- 积分任务 -->
			<view class="task pa">
                <view class="task_box" v-for="(task, index) in list" :key="task.name">
                    <view class="title x-bc">
                        <p>{{task.name}}</p>
                    </view>
                    <view class="part x-bc" v-for="(item,sub) in task.list" :key="sub">
                        <view class="left">
                            <p>{{ item.name }} 
                                <span class="hint" v-if="item.type == 2">({{item.finish_number}} / {{item.limit_number }})</span>
                            </p>
                            <span>积分{{ item.give_points }}</span>
                        </view>
						<view class="right x-f" @click.stop="receive(list[index].list[sub])">
							<span v-if="item.status=== null" @click.stop="goOver(list[index].list[sub])">去完成</span>
							<span v-if="item.status===1" class="receive" @click="getTask(list[index].list[sub])">领取</span>
							<span v-if="item.status === 0" class="already_receive">已完成</span>
						</view>
                    </view>
                </view>
			</view>
			<!-- 领取状态  0：成功  1：失败 -->
			<view class="popup pf x-f" v-if="receive_status" @touchmove.stop.prevent="">
				<view class="transparent pa" @click="receive_status = false"></view>
				<view class="popup_box x-f y-f">
					<view class="icon pr" :class="receive_popup.status == 1 ? 'fail_icon' : ''"></view>
					<view class="text">{{ receive_popup.status == 0 ? receive_popup.success_text : receive_popup.fail_text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			// 获取vuex 数据
			...mapState({
				earnPoints: state => state.user.memberearnPoints,
				userPoints: state => state.init.points
			}),
		},
		components: {},
		data() {
			return {
				actPoints: 0,                           // 积分
				task: [],                               // 积分任务
				user: [],                               // 会员信息
				count: 0,				                // 签到天数
				change_color: false,			        // 更改签到后的样式
				status: false,                          // 切换签到，把签到变成已签到
				integral_num: 0,                        // 当前积分
				integral_url: '/pages/present/index',
				receive_status: false,                  // 领取状态
				receive_popup: {                        // 任务领取
					status: 0,
					success_text: "领取成功",
					fail_text: "领取失败"
				},
				task_bg: this.imgUrl + 'task-bg.png',	// 头部背景图
				star: this.imgUrl + 'star.png',			// 积分样式图
				card: this.imgUrl + 'card-01.png',      // 当前积分背景图
				points: [],                             // 记录签到规则
				signList: [],                           // 已经签到的列表
				today: 0,                               // 是否为今天
                cycleList: [],                          // 循环任务
                list: {},                               // 积分任务列表
			};
		},
		watch: {
			status(val) {
				if(val) {
					this.sign_in.num += 1
				}
			},
		},
		 onPageScroll(res) {
		    this.top = res.scrollTop;
		},
		methods: {
			// 去完成
			goOver(val) {
				if(val.key == 'browse_the_page') {
					this.$store.dispatch('task/get_status',true)
					this.$store.dispatch('task/get_taskDetail',val)
					this.$Router.push({
						path: '/pages/present/index'
					})
				}
				if(val.key == 'improve_info') {
					this.$Router.push({
						path: '/pages/user/info/edit/index'
					})
				}
				if(val.key == 'cash_pay') {
					// 跳转回商品页
						this.$Router.push({
							path: '/pages/present/index',
						})
				}
			},
            // 点击签到;
            change() {
                // 判断当前是否签到，若签到则不向后台发送请求
                let that = this;
                if(that.today) {
                    that.$tools.toast('当天已经签到了')
                } else {
                    that.$store.dispatch('user/get_membersignIn').then(res => {
                        // 今天已经签到
                        that.today = true;
                        // 增加签到天数
                        that.count++;
                        // 当前是否新增完成
                        let sum = 0;
                        /**
                         * 遍历签到天数；
                         * 如果当前没有签到，那么则给数组第一位加0;
                         */ 
                        that.signList.map((item, index) => {
                            if (item.sign) {
                                sum = index + 1;
                            }
                        })
                        that.signList[sum].sign = true;
                        // 查一下用户当前积分;
                        that.userScore();
                    })
                }
            },
			toTabbar(val) {
				uni.navigateTo({
					url: val
				})
			},
			// 积分任务状态点击
			receive(item) {
                if (item.status === 1) {
                    this.$Router.pushTab({
                        path: this.integral_url
                    })
                }
				if (item.status === 2) {
					this.receive_status = true;
					if(this.receive_popup.status === 0){
						item.status = 3
					}
				}
			},
            // 获取当前签到记录
			getApi() {
				this.$api('memberearnPoints').then( res => {
					let arr = res;
					// 签到记录
					this.points = arr.data;
                    // 连续签到几天
					this.count =  this.points.continuity_sign;
                    // 今天是否签到
                    this.today = arr.data.today;
					// 签到列表
					this.signList = arr.data.earnRule;
                    /**
                     * 遍历签到列表
                     * 修改名称
                     */ 
                    this.signList.map((item, index) => {
                        item.name = index + 1 + '次';
                    })
					
				})
                // 将数据存储在vuex - 好像没什么必要
				this.$store.dispatch('user/get_memberearnPoints',this.points)
				
			},
            // 请求用户积分
            userScore() {
                this.$api('memberinfo').then(res => {
                	this.user = res.data
                	this.actPoints = this.user.points
                	this.$store.dispatch('user/get_user',this.user)
                })
            },
			// 领取任务
			getTask(val) {
				this.$api('task.receive',{ key: val.key }).then(res=> {
					if(res.status) {
						val.status = 0;
						 // 请求用户积分
						this.userScore();
						this.getList();
					}
				})
			},
			// 获取任务请求
			getList() {
				this.$api('task.list').then(res=> {
					this.task = res.data;
                    this.task.map((item, index) => {
                        if (item.type == 1) {
                            this.cycleList.push(item);
                            this.task.splice(index, 1);
                        }
                    });
					let arr =this.cycleList
					// 数组去重 
					for(var i = 0; i < arr.length-1;i++){
					    //还是两两比较 一样删除后面的
						if(arr[i].name === arr[i+1].name){
							arr.splice(i,1);
							//i-- 和j--同理
							i--;
						}
					}
                    let task = {
                        name: '积分任务',
                        list: arr
                    }
					let cycle = {
						name: '循环任务',
						list: this.task
					}
                    this.list.task = task;
                    this.list.cycle = cycle;
					this.$store.dispatch('task/get_task',this.task)
				})
			},
		},
		onLoad() {
			this.getApi()
            this.userScore()
			this.getList()
		},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";
</style>
